<!--购买服务器-->
<template>
  <div class="bg" @click="hideClick">
    <div class="all"></div>

    <div class="content bg2"  @click="click">
      
      <text class="font28 text1">调整杠杆</text>

      <div class="input-frame bg3">
          
          <div class="input-but" @click="jianClick">
            <text class="font62 text1">-</text>
          </div>

          <input class="input text1" v-model="bl"
          ref="refPrice" type="number" placeholder="请输入杠杠倍率" 
          @blur="onBlur">
          
          <div class="input-but" @click="jiaClick">
            <text class="font54 text1">+</text>
          </div>
      </div>

      <WeexSlideBar class="slide" ref='WeexSlideBar' />

      <div class="but main-bt1" @click="okClick">
        <text class="font30 text1">确定</text>
      </div>
    </div>
  </div>
</template>

<script>

//功能
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jnavigator from "@/_js/navigator";
import jhttps from "@/_js/https";
import jbroadcast from "@/_js/broadcast";

import jtrading from "./view/trading"

const weexFunction = weex.requireModule("WeexFunction");
const globalEvent = weex.requireModule('globalEvent');

export default {
  data() {
    return {
      Config:jconfig,
      isShow:true, 

      max:100,
      bl:50,
      bls:[1, 25, 50, 75, 100],
      rate:'20',

      api:undefined,
      pair:undefined,
      back:undefined,
    };
  },

  mounted() {
    this.bl = jnavigator.getParam('bl');
    this.api = jnavigator.getParam('api');
    this.pair = jnavigator.getParam('pair');
    //滑条改变触发
    globalEvent.addEventListener("slideChange",(e)=>{
      var bl = jmath.cheng(e.ratio, this.max, 0, 2);
      bl = bl > this.max ? this.max : bl;
      bl = bl < 1 ? 1 : bl;
      this.bl = bl;
    });

    setTimeout(() => {
      this.upSlideBar();
    }, 100);
  },

  computed: {
  },

  methods: {
    
    //更新滑条
    upSlideBar(){
      
      var rightStr = this.max+'x';
      var color = '1677fe';
      var ratio = jmath.chu(this.bl, this.max, 2, 2);
      ratio = ratio > 1 ? '1' : ratio;
      this.$refs.WeexSlideBar && this.$refs.WeexSlideBar.upSlide({rightStr, color, ratio});
    },

    //获取滑条圆样式
    getBarRoundClass(index, length) {

      if (index == 0) return 'astart';
      if (index == length) return 'aend';
      return '';
    },

    /******************************** https */
    //https调整杠杠
    httpsChangeLeverage(rsa){

      var param = {'apiData':rsa, //api秘钥
                  'leverage':Number(this.bl),
                  'counterCoin':this.pair.counterCoin, //交易币
                  'baseCoin':this.pair.baseCoin};
      jhttps.postX("manual/changeLeverage",param,true,(data)=>{

          if (data.status == 11505) { //服务器公钥过期
            jtrading.delectApiRsaStr(true);
            jtrading.gtApiRsaStr(this.api, true, true, (newrsa)=>{
              this.httpsChangeLeverage(newrsa);
            });
            return;
          }

          jmodal.hideLoad();
          if(data.status == 200){
            jbroadcast.send('ReviseRate', this.bl);
            jmodal.toast('调整成功');
            this.hideClick();
          } else {
            jmodal.toast(data.msg);
          }
      });
    },
    
    /********************************** 输入框*/
    //键盘隐藏
    onBlur() {
      
      var bl = jmath.xiaoshu(this.bl, 0, 2);
      bl = bl > this.max ? this.max : bl;
      bl = bl < 1 ? 1 : bl;
      this.bl = Number(bl);

      this.upSlideBar();
    },

    /********************************** 点击*/
    //操作界面防止点击影藏
    click() {},

    //隐藏
    hideClick() {
      jnavigator.dismiss();
    },
    
    //倍率减
    jianClick() {
      var bl = this.bl - 1;
      this.bl = bl <1 ? 1 : bl;
    },

    //倍率加
    jiaClick() {
      var bl = this.bl + 1;
      this.bl = bl > 100 ? 100 : bl;
    },

    //倍率点击
    blClick(bl) {
      this.bl = bl;
    },

    //确定
    okClick() {

      jmodal.showLoad();
      jtrading.gtApiRsaStr(this.api, true, true, (rsa)=>{
        this.httpsChangeLeverage(rsa);
      });
    }
  }
}

</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  align-items: flex-start;
  top: 0;
  
  right: 0;
  bottom: 0;
  background-color:rgba(0, 0, 0, 0.6);
}
.content {
  
  width: 750px;

  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 60px;

  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

.input-frame {
  flex-direction: row;
  height: 80px;
  border-radius: 40px;
  margin-top: 30px;
  padding: 0 20px;
}
.input{
  flex: 1;
  height:80px;
  font-size:28px;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  background-color:transparent;
  placeholder-color:#616F93;
  text-align: center;
}
.input-but {
  width: 80px;
  align-items: center;
  justify-content: center;
}

.slide {
  height:94px;
  margin-top: 60px;
}

.but {
  align-items: center;
  justify-content: center;
  height: 80px;
  border-radius: 12px;
  margin-top: 80px;
}
</style>